// main.qml
// Qt for HarmonyOS 动画演示集合
// 适配自 qtDemo-master/AnimationDemo
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15

ApplicationWindow {
    id: root
    width: Screen.width > 1000 ? 1600 : 800
    height: Screen.height > 1000 ? 2560 : 741
    visible: true
    title: "Qt 动画演示集合"
    
    // 窗口状态变化处理（修复最大化黑屏问题）
    onVisibilityChanged: {
        if (visibility === Window.Windowed || visibility === Window.Maximized || visibility === Window.FullScreen) {
            Qt.callLater(function() {
                console.log("AnimationDemo: 窗口可见性变化，强制更新")
                // 强制更新所有可见的动画组件
                if (currentDemoIndex === 2) {
                    // 移动动画需要重新启动
                    movingLabel.x = 0
                }
            })
        }
    }
    
    onWindowStateChanged: {
        console.log("AnimationDemo: 窗口状态变化 - state:", windowState)
        // 窗口状态变化时，延迟更新以确保尺寸已更新
        Qt.callLater(function() {
            console.log("AnimationDemo: 窗口尺寸:", width, "x", height)
        })
    }
    
    // 当前选中的动画demo索引
    property int currentDemoIndex: 0
    
    // Demo名称列表
    property var demoNames: [
        "呼吸灯",
        "渐变效果",
        "移动动画",
        "旋转动画",
        "缩放动画",
        "文字动画"
    ]
    
    Component.onCompleted: {
        console.log("AnimationDemo: QML组件初始化完成")
        console.log("AnimationDemo: 当前demo索引:", currentDemoIndex)
        console.log("AnimationDemo: 可用demo数量:", demoNames.length)
        console.log("AnimationDemo: 根元素尺寸:", width, "x", height)
    }
    
    Column {
        anchors.fill: parent
        spacing: 0
        
        // 标题栏
        Rectangle {
            width: parent.width
            height: 120
            color: "#2196F3"
            
            Row {
                anchors.centerIn: parent
                spacing: 20
                
                Text {
                    anchors.verticalCenter: parent.verticalCenter
                    text: "Qt 动画演示集合"
                    font.pixelSize: 48
                    font.bold: true
                    color: "#FFFFFF"
                }
            }
        }
        
        // Demo选择器
        Rectangle {
            width: parent.width
            height: 100
            color: "#FFFFFF"
            border.color: "#E0E0E0"
            border.width: 1
            
            Row {
                anchors.centerIn: parent
                spacing: 15
                
                Text {
                    anchors.verticalCenter: parent.verticalCenter
                    text: "选择动画:"
                    font.pixelSize: 28
                    color: "#333333"
                }
                
                ComboBox {
                    id: demoComboBox
                    width: 300
                    height: 60
                    model: demoNames
                    currentIndex: 0
                    font.pixelSize: 26
                    onCurrentIndexChanged: {
                        currentDemoIndex = currentIndex
                    }
                }
            }
        }
        
        // 动画演示区域
        Rectangle {
            width: parent.width
            height: parent.height - 220
            color: "#FFFFFF"
            
            // 直接显示内容，不使用Loader
            Item {
                anchors.fill: parent
                
                // 呼吸灯动画
                Rectangle {
                    visible: currentDemoIndex === 0
                    anchors.fill: parent
                    color: "#1E1E1E"
                    
                    property int alpha: 20
                    
                    Column {
                        anchors.centerIn: parent
                        spacing: 30
                        
                        Text {
                            anchors.horizontalCenter: parent.horizontalCenter
                            text: "呼吸灯动画"
                            font.pixelSize: 36
                            font.bold: true
                            color: "#FFFFFF"
                        }
                        
                        Rectangle {
                            anchors.horizontalCenter: parent.horizontalCenter
                            width: 200
                            height: 200
                            radius: 100
                            color: Qt.rgba(0, 1, 0, parent.parent.alpha / 255.0)
                            border.color: "#FFFFFF"
                            border.width: 2
                        }
                    }
                    
                    SequentialAnimation on alpha {
                        running: currentDemoIndex === 0
                        loops: Animation.Infinite
                        NumberAnimation {
                            from: 20
                            to: 255
                            duration: 2500
                            easing.type: Easing.InOutQuad
                        }
                        NumberAnimation {
                            from: 255
                            to: 20
                            duration: 2500
                            easing.type: Easing.InOutQuad
                        }
                    }
                }
                
                // 渐变效果动画
                Rectangle {
                    id: fadeDemo
                    visible: currentDemoIndex === 1
                    anchors.fill: parent
                    color: "#F5F5F5"
                    
                    property real targetOpacity: 1.0
                    
                    Column {
                        anchors.centerIn: parent
                        spacing: 30
                        
                        Text {
                            anchors.horizontalCenter: parent.horizontalCenter
                            text: "渐变效果动画"
                            font.pixelSize: 36
                            font.bold: true
                            color: "#333333"
                        }
                        
                        Rectangle {
                            id: fadeTarget
                            anchors.horizontalCenter: parent.horizontalCenter
                            width: 300
                            height: 200
                            color: "#2196F3"
                            radius: 10
                            opacity: fadeDemo.targetOpacity
                            
                            Text {
                                anchors.centerIn: parent
                                text: "渐变目标"
                                font.pixelSize: 32
                                color: "#FFFFFF"
                            }
                        }
                        
                        Row {
                            anchors.horizontalCenter: parent.horizontalCenter
                            spacing: 20
                            
                            Button {
                                text: "淡出"
                                width: 150
                                height: 60
                                font.pixelSize: 28
                                onClicked: {
                                    fadeOutAnimation.start()
                                }
                            }
                            
                            Button {
                                text: "淡入"
                                width: 150
                                height: 60
                                font.pixelSize: 28
                                onClicked: {
                                    fadeInAnimation.start()
                                }
                            }
                        }
                    }
                    
                    NumberAnimation {
                        id: fadeOutAnimation
                        target: fadeDemo
                        property: "targetOpacity"
                        from: 1.0
                        to: 0.0
                        duration: 1000
                    }
                    
                    NumberAnimation {
                        id: fadeInAnimation
                        target: fadeDemo
                        property: "targetOpacity"
                        from: 0.0
                        to: 1.0
                        duration: 1000
                    }
                }
                
                // 移动动画
                Rectangle {
                    id: moveDemo
                    visible: currentDemoIndex === 2
                    anchors.fill: parent
                    color: "#F5F5F5"
                    
                    Text {
                        anchors.top: parent.top
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.topMargin: 30
                        text: "移动动画"
                        font.pixelSize: 36
                        font.bold: true
                        color: "#333333"
                    }
                    
                    Rectangle {
                        id: movingLabel
                        width: 150
                        height: 60
                        color: "#3498db"
                        radius: 5
                        x: 0
                        
                        Text {
                            anchors.centerIn: parent
                            text: "移动的标签"
                            font.pixelSize: 24
                            color: "#FFFFFF"
                        }
                        
                        SequentialAnimation on x {
                            id: moveAnimation
                            running: currentDemoIndex === 2 && moveDemo.visible
                            loops: Animation.Infinite
                            NumberAnimation {
                                from: 0
                                to: moveDemo.width - movingLabel.width
                                duration: 2000
                                easing.type: Easing.InOutQuad
                            }
                            NumberAnimation {
                                from: moveDemo.width - movingLabel.width
                                to: 0
                                duration: 2000
                                easing.type: Easing.InOutQuad
                            }
                        }
                        
                        y: (moveDemo.height - height) / 2
                    }
                    
                    // 当切换到移动动画时，重置位置并启动动画
                    onVisibleChanged: {
                        if (visible) {
                            movingLabel.x = 0
                            moveAnimation.restart()
                        }
                    }
                }
                
                // 旋转动画
                Rectangle {
                    visible: currentDemoIndex === 3
                    anchors.fill: parent
                    color: "#F5F5F5"
                    
                    property real rotation: 0
                    
                    Column {
                        anchors.centerIn: parent
                        spacing: 30
                        
                        Text {
                            anchors.horizontalCenter: parent.horizontalCenter
                            text: "旋转动画"
                            font.pixelSize: 36
                            font.bold: true
                            color: "#333333"
                        }
                        
                        Rectangle {
                            anchors.horizontalCenter: parent.horizontalCenter
                            width: 200
                            height: 200
                            color: "transparent"
                            
                            Rectangle {
                                anchors.centerIn: parent
                                width: 150
                                height: 150
                                color: "#9C27B0"
                                radius: 10
                                rotation: parent.parent.parent.rotation
                                
                                Text {
                                    anchors.centerIn: parent
                                    text: "旋转"
                                    font.pixelSize: 28
                                    color: "#FFFFFF"
                                }
                            }
                        }
                    }
                    
                    NumberAnimation on rotation {
                        running: currentDemoIndex === 3
                        loops: Animation.Infinite
                        from: 0
                        to: 360
                        duration: 5000
                        easing.type: Easing.Linear
                    }
                }
                
                // 缩放动画
                Rectangle {
                    id: scaleDemo
                    visible: currentDemoIndex === 4
                    anchors.fill: parent
                    color: "#F5F5F5"
                    
                    property real scaleValue: 1.0
                    
                    Column {
                        anchors.centerIn: parent
                        spacing: 30
                        
                        Text {
                            anchors.horizontalCenter: parent.horizontalCenter
                            text: "缩放动画"
                            font.pixelSize: 36
                            font.bold: true
                            color: "#333333"
                        }
                        
                        Rectangle {
                            id: scaleTarget
                            anchors.horizontalCenter: parent.horizontalCenter
                            width: 200 * scaleDemo.scaleValue
                            height: 200 * scaleDemo.scaleValue
                            color: "#FF5722"
                            radius: 10
                            
                            Text {
                                anchors.centerIn: parent
                                text: "缩放"
                                font.pixelSize: 28
                                color: "#FFFFFF"
                            }
                        }
                        
                        Button {
                            anchors.horizontalCenter: parent.horizontalCenter
                            text: scaleAnimation.running ? "停止动画" : "开始动画"
                            width: 200
                            height: 60
                            font.pixelSize: 28
                            onClicked: {
                                if (scaleAnimation.running) {
                                    scaleAnimation.stop()
                                } else {
                                    if (scaleDemo.scaleValue === 1.0) {
                                        scaleAnimation.from = 1.0
                                        scaleAnimation.to = 2.0
                                    } else {
                                        scaleAnimation.from = 2.0
                                        scaleAnimation.to = 1.0
                                    }
                                    scaleAnimation.start()
                                }
                            }
                        }
                    }
                    
                    NumberAnimation {
                        id: scaleAnimation
                        target: scaleDemo
                        property: "scaleValue"
                        duration: 1000
                        easing.type: Easing.InOutQuad
                    }
                    
                    // 切换到缩放动画时，重置缩放值
                    onVisibleChanged: {
                        if (visible) {
                            scaleValue = 1.0
                        }
                    }
                }
                
                // 文字动画
                Item {
                    id: textDemo
                    visible: currentDemoIndex === 5
                    anchors.fill: parent
                    
                    property real yPosition: -parent.height
                    
                    Rectangle {
                        anchors.fill: parent
                        color: "#1E1E1E"
                        
                        Text {
                            anchors.top: parent.top
                            anchors.horizontalCenter: parent.horizontalCenter
                            anchors.topMargin: 30
                            text: "文字动画"
                            font.pixelSize: 36
                            font.bold: true
                            color: "#FFFFFF"
                        }
                        
                        Text {
                            id: animatedText
                            anchors.horizontalCenter: parent.horizontalCenter
                            y: textDemo.height / 2 + textDemo.yPosition
                            text: "欢迎使用Qt动画演示"
                            font.pixelSize: 32
                            color: "#00FF00"
                        }
                        
                        Button {
                            anchors.bottom: parent.bottom
                            anchors.horizontalCenter: parent.horizontalCenter
                            anchors.bottomMargin: 50
                            text: "重新播放"
                            width: 200
                            height: 60
                            font.pixelSize: 28
                            onClicked: {
                                textDemo.yPosition = -textDemo.height
                                textAnimation.start()
                            }
                        }
                    }
                    
                    NumberAnimation {
                        id: textAnimation
                        target: textDemo
                        property: "yPosition"
                        from: -textDemo.height
                        to: 0
                        duration: 1000
                        easing.type: Easing.OutInQuad
                    }
                    
                    // 当切换到文字动画时，自动播放
                    onVisibleChanged: {
                        if (visible) {
                            yPosition = -height
                            Qt.callLater(function() {
                                textAnimation.start()
                            })
                        }
                    }
                }
            }
        }
    }
    
    
}
